<script setup lang="ts">
import { ref } from 'vue';
const check = ref(false)
</script>

<template>
    <div class="task">
        <div class="checkbox" :class="{ 'checkbox--checked': check }" @click="check = !check"></div>
        运营平台证书过期的问题处理
    </div>
</template>

<style scoped>
.task {
    position: relative;
    margin-bottom: 4px;
    margin-inline: 32px;
    padding: 8px 38px;
    border-radius: var(--border-radius);
    background-color: var(--background-secondary-color);
    transition: background-color 0.2s ease;
    will-change: background-color;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.task:hover {
    background-color: var(--background-hover-color);

}

.checkbox {
    position: absolute;
    cursor: pointer;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1.5px solid var(--text-color);
    background-color: var(--background-secondary-color);
    transition: all 0.2s ease;
}

.checkbox--checked {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}

.checkbox--checked::after {
    content: '';
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 3px;
    height: 6px;
    border: 1.5px solid var(--text-color);
    border-top-color: transparent;
    border-left-color: transparent;
}
</style>